{% extends 'index.html' %}
{% load staticfiles %}
{% block title %}阅读页{% endblock %}
{% block header %}
{% endblock %}
{#{% block custom_css#}
{% block bread %}
    <ul class="icons">
        <li>
            当前位置:
            {% ifequal kind 'index' %}<a href="{% url 'index' %}">首页</a>{% endifequal %}
            {% ifequal kind 'python' %}<a href="{% url 'blog:article_label' label='python' %}">Python</a>{% endifequal %}
            {% ifequal kind 'front' %}<a href="{% url 'blog:article_label' label='front' %}">前端</a>{% endifequal %}
            {% ifequal kind 'database' %}<a href="{% url 'blog:article_label' label='database' %}">数据库</a>{% endifequal %}
            {% ifequal kind 'zaji' %}<a href="{% url 'blog:article_label' label='zaji' %}">杂记</a>{% endifequal %}
            >
            {{ article }}
        </li>
    </ul>
{% endblock %}
{% block body %}
        <footer id="wrapper">

    <!-- Main -->
        <div id="main">
        <!-- Post -->
            <section class="post">
                <header class="major">
                    <span class="date">
                         <time datetime="{{ article.add_time }}">
                            {{ article.add_time|date:"Y.m.d   h:m" }}
                        </time>
                    </span>
                    <h3>{{ article.title }}</h3>
                    <p>{{ article.click_nums }}阅读,作者:{{ article.article_author }}</p>
{#                    <a href="#" class="image fit"><img src="{{ MEDIA_URL }}{{ article.image }}" alt="" /></a>#}
                </header>
{#                <div class="image main"><img src="{% static 'images/pic01.jpg' %}" alt="" /></div>#}
                <p>{{ article.content|safe }}</p>

            </section>

            <section>
                <h4>留言评论:{{ comment_nums }}</h4>

                {% for comment in all_comments %}
                    <h5>{{ comment.name }}:</h5>
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ comment.message }}
                {% endfor %}
            </section>
        </div>
</footer>

{% endblock %}
{% block footer %}
    <footer id="footer">
        <section>
            <form>
                <div class="fields">
                    <div class="field">
                        <label for="name">昵称</label>
                        <input type="text" name="name" id="comment-name" />

                    </div>
                    <div class="field">
                        <label for="email">邮箱</label>
                        <input type="text" name="email" id="comment-email" />

                    </div>
                    <div class="field">
                        <label for="message">内容</label>
                        <textarea name="message" id="comment-message" rows="3" placeholder="扯淡、吐槽、表扬、鼓励...想说啥就说啥！"></textarea>
                    </div>
                </div>
                <ul class="actions">
                    <li><input id="submit-comment" type="button" value="评论" /></li>
                </ul>
            </form>
        </section>
        <section class="split contact">
            <section class="alt">
                <h3>暂无</h3>
                <p>暂无<br />
                暂无</p>
            </section>
            <section>
                <h3>联系方式</h3>
                <p><a href="#">暂无</a></p>
            </section>
            <section>
                <h3>邮箱</h3>
                <p><a href="#">暂无</a></p>
            </section>
            <section>
                <h3>社交</h3>
                <ul class="icons alt">
                    <li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
                    <li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li>
                    <li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>
                    <li><a href="https://github.com/RoyalLiang" class="icon alt fa-github"><span class="label">GitHub</span></a></li>
                </ul>
            </section>
        </section>
    </footer>
{% endblock %}
{% block js %}
    <script>
    //添加评论
    $(document).ready(function() {
        $("#submit-comment").on('click', function () {
            let name = $("#comment-name").val();
            let email = $("#comment-email").val();
            let comments = $("#comment-message").val();
            if (name === "" && email === "" && comments === ""){
                alert("昵称,邮箱，评论不能为空");
                return
            }
            else if (name === "") {
                alert("昵称不能为空");
                return
            }
            else if (email === "") {
                alert("邮箱不能为空");
                return
            }
            else if (comments === "") {
                alert("评论不能为空");
                return
            }

            $.ajax({
                cache: false,
                type: "POST",
                url: "{% url 'blog:add_comment' %}",
                data: {'article_id': {{ article.id }}, 'name': name, 'email': email, 'comments': comments},
                async: true,
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status === 'fail') {
                        if (data.msg === '评论失败') {
                            alert(data.msg)
                        } else {
                            alert(data.msg)
                        }

                    } else if (data.status === 'success') {
                        window.location.reload();//刷新当前页面.
                    }
                },
            });
        });
    });

    </script>
{% endblock %}
